import { FC, useState, useEffect, useRef, RefObject } from 'react';
import styles from './style.less';

import Image from '@/components/Image';
import { Form, FormInstance, Input, message } from 'antd';
const { Password } = Input;

import logo from '@/assets/login/logo.png';

import { useModel } from 'umi';
import { login } from '@/api';

const Login: FC = () => {
  const { checkKey, captchaImg, getCaptchaImg } = useModel('login');
  useEffect(() => {
    getCaptchaImg();
  }, []);
  const formRef = useRef() as RefObject<FormInstance>;
  const toLogin = async () => {
    const data = formRef?.current?.getFieldsValue();
    console.log(data);
    const { username, password, captcha } = data;
    if (!username) {
      message.error('请输入用户名');
      return false;
    }
    if (!password) {
      message.error('请输入密码');
      return false;
    }
    if (!captcha) {
      message.error('请输入验证码');
      return false;
    }
    const result: any = await login.userLogin({
      username,
      password,
      captcha,
      checkKey,
      type: 1,
    });
    if (result.code === 200) {
      console.log('登录成功');
      message.success(result.message);
      const data = result.result;
      // 存token
      window.sessionStorage.setItem('APP_TOKEN', data.token);
      // 存用户信息
      window.sessionStorage.setItem(
        'appUserInfo',
        JSON.stringify(data.userInfo),
      );
      // 获取角色权限
      const rolesResult: any = await login.getUserRole({
        type: 1,
        token: data.token,
      });
      if (rolesResult.code === 200) {
        window.sessionStorage.setItem(
          'rolesMenu',
          JSON.stringify(rolesResult.result.menu),
        );
      } else {
        message.error(rolesResult.message);
      }
      console.log(rolesResult);
    } else {
      message.error(result.message);
      getCaptchaImg();
    }
    console.log(result);
  };

  return (
    <div className={styles.login_container}>
      <div className={styles.title_warp}>
        <Image src={logo} scale={9}></Image>
        <span>经济运行一网统揽</span>
      </div>
      <div className={styles.motto}>
        <span>言出必践</span>
        <span>务实创新</span>
      </div>
      <div className={styles.copyright}>
        版权所有© 北京亦庄大数据科技发展有限公司
      </div>
      <div className={styles.login_form}>
        <div className={styles.title}>登录</div>
        <Form ref={formRef} className={styles.form_content}>
          <Form.Item noStyle name="username">
            <div className={styles.form_row} id="resetLoginInput">
              <p>用户名</p>
              <Input
                bordered={false}
                style={{
                  borderBottom: '1px solid #ccc',
                }}
              ></Input>
            </div>
          </Form.Item>
          <Form.Item noStyle name="password">
            <div className={styles.form_row} id="resetLoginInput">
              <p>密码</p>
              <Password
                bordered={false}
                style={{
                  borderBottom: '1px solid #ccc',
                }}
              ></Password>
            </div>
          </Form.Item>
          <Form.Item noStyle name="captcha">
            <div className={styles.form_row_captcha}>
              <div className={styles.left}>
                <p>验证码</p>
                <Input
                  bordered={false}
                  style={{
                    borderBottom: '1px solid #ccc',
                  }}
                ></Input>
              </div>
              <Image
                src={captchaImg}
                className={styles.captchaimg}
                onClick={() => getCaptchaImg()}
              ></Image>
            </div>
          </Form.Item>
        </Form>
        <div className={styles.login_btn} onClick={() => toLogin()}>
          <span>登录</span>
        </div>
      </div>
    </div>
  );
};

export default Login;
